<template>
  <div class="login-wrapper">
    <vue-particles
      color="#dedede"
      :particleOpacity="0.7"
      :particlesNumber="100"
      shapeType="star"
      :particleSize="4"
      linesColor="#dedede"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    ></vue-particles>
    <div class="login">
      <div class="projectName">
        <span>会议室管理系统</span>
      </div>
      <ul class="login-list" @keyup.13="login">
        <li>
          <input id="userName" type="text" placeholder="请输入账号">
        </li>
        <li>
          <input id="password" type="password" placeholder="请输入密码">
        </li>
        <li>
          <a id="register" class="btn" @click="register">注册</a>
          <a id="login" class="btn" @click="login">登 录</a>
        </li>
        <li>
          <a id="forgetPw" @click="forgetPw" class="tar" >忘记密码？</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Fetch from "mixins/fetch";

export default {
  data() {
    return {};
  },
  mixins: [Fetch],
  created() {
    this.$_fetch_account().then(res => console.table(res));
  },
  mounted() {
    window.addEventListener("enter", this.login);
  },
  destroyed() {
    window.removeEventListener("enter", this.login);
  },
  methods: {
    // 登陆
    login() {
      const userName = document.getElementById("userName").value;
      const password = document.getElementById("password").value;
      console.log(userName);
      console.log(password);
      if (userName !== "" && password !== "") {
          this.$_fetch_login(
            this.$qs.stringify({ count:userName, password:password })).then(res=>{
              if(res.code === 0) {
                  sessionStorage.setItem(
                  "userInfo",
                  JSON.stringify({
                  admin: userName
              }))
              this.$router.push("/");
              }else{
                this.$message({
                message: "用户账号密码错误！",
                type: "error"
                 })
              }
              }).catch(()=>{
                this.$message({
                message: "网络请求出错",
                type: "error"
                 });
              });
      } else {
        this.$message({
          message: "账号密码不能为空！",
          type: "warning"
        });
      }
    },
    // 注册
    register () {
      this.$router.push("/register");
    },
    // 忘记密码
    forgetPw () {
      this.$router.push("/forgetPw");
    }
  }
};
</script>
<style lang="scss" scoped>
.login-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  background: url("../assets/images/bj.jpg") no-repeat center fixed;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  width: 100%;
  height: 100%;
  .login {
    width: 400px;
    height: 345px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -172px 0 0 -200px;
    .projectName {
      width: 50%;
      margin: 30px auto 30px;
      font-size: 18px;
      color: #fff;
      text-align: center;
    }
    .login-list {
      width: 90%;
      margin: 0 auto;
      li {
        margin-bottom: 15px;
        input {
          padding: 13px 10px;
          border: 1px solid #e6e6e6;
          border-radius: 3px;
          font-size: 14px;
          width: 100%;
        }
        .btn {
          width: 30%;
          height: 45px;
          line-height: 45px;
          margin-left:14%;
          margin-top:3%;
          text-align: center;
          background: #17b5a6;
          font-size: 16px;
          color: #fff;
          display: inline-block;
          border-radius: 3px;
          &:hover {
            cursor: pointer;
          }
        }
        .btn2 {
          width: 30%;
          height: 45px;
          line-height: 45px;
          margin-left:14%;
          margin-top:3%;
          text-align: center;
          background: #17b5a6;
          font-size: 16px;
          color: #fff;
          display: inline-block;
          border-radius: 3px;
        }
        .tar {
          color:white;
        }
        .tar:hover {
          color: red;
        }
      }
    }
  }
}
</style>
